<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/commen.css">
    <link rel="stylesheet" href="css/game_hall.css">
</head>
<body>
    <div class="nav">五子棋对战</div>
    <div class="container">
        <!-- 下面的这个垂直水平居中 -->
        <div>
            <!-- 下面的这个展示用户信息 -->
            <div id="screen"></div>
            <!-- 下面的这个就是我们的匹配按钮的实现 -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script>
        $.ajax({
            type:'get',
            url:'/userInfo',
            success:function(body){
                let screenDiv = document.querySelector('#screen');
                screenDiv.innerHTML = "玩家：" + body.username + " 分数：" + body.score
                + "<br>比赛场次：" + body.totalCount + "  获胜场次：" + body.winCount
            },
            error: function(){
                alert("获取用户信息失败！");
            }
        });

        //下面的这个就是初始化我们的websocket

        let websocketUrl = 'ws://' + location.host + '/findMatch';
        let websocket = new WebSocket(websocketUrl);
        websocket.onopen=function(){
            console.log("onopen");
        }

        websocket.onclose=function(){
            console.log("onclose");
            console.log("当前和服务器之间的链接已经断开，重新登陆");
            location.assign("/login.html");
        }

        websocket.onerror=function(){
            console.log("onerror");
        }

        //下面的这个就是监视我们的页面的关闭
        window.onbeforeunload=function(){
            websocket.close();
        }

        websocket.onmessage=function(e){
            //下面的这个就是处理服务器的响应数据
            //解析得到的响应：返回的数据是json字符串，需要转换为这个js对象
            let resp=JSON.parse(e.data);
            let matchButton=document.querySelector('#match-button');
            if(!resp.ok){
                console.log("游戏大厅收到了失败的响应"+resp.reason);
                return;
            }
            else if(resp.message=='startMatch'){
                //开始匹配的请求发送成功
                console.log("进入匹配队列成功");
                matchButton.innerHTML='匹配中.....点击停止';
            }
            else if(resp.message=='stopMatch'){
                //结束匹配的请求发送成功
                console.log("离开匹配队列成功");
                matchButton.innerHTML='开始匹配';
            }
            else if(resp.message=='matchSuccess'){
                //已经匹配到了对手
                console.log("匹配成功，进入游戏房间");
                location.assign('/game_room.html');
            }
            else{
                console.log("收到非法相应！message="+resp.message);
            }
        }

        //给匹配按钮添加这个点击事件
        let matchButton = document.querySelector("#match-button");
        matchButton.onclick=function(){
            //验证这个websocket是不是连接正常
            //连接正常
            if(websocket.readyState==websocket.OPEN){
                //下面的这个是两种：开始匹配/停止匹配
                if(matchButton.innerHTML=='开始匹配'){
                    console.log("开始匹配");
                    websocket.send(JSON.stringify(
                        {
                            message:'startMatch',
                        }
                    ));
                }
                else if(matchButton.innerHTML=='匹配中.....点击停止'){
                    console.log("停止匹配");
                    websocket.send(JSON.stringify(
                        {
                            message:'stopMatch',
                        }
                    ));
                }
            }
            //连接异常
            else{
                alert("你的链接断开，请重新登陆！！！")
                location.assign('/login.html');
            }
        }
    </script>
</body>
</html>